import React from 'react';
import PropTypes from 'prop-types';

const Todo = ({
	onToggle,
	onDelete,
	id,
	text,
	completed
}) => (
	<li onClick={onToggle} style={{textDecoration:completed?'line-through':'none'}}>
		<span>{id} : {text}</span>
		<button style={{marginLeft:20}} onClick={(e)=>{e.stopPropagation();onDelete(e)}}>删除</button>
	</li>
)

Todo.propTypes = {
	onToggle: PropTypes.func.isRequired,
	onDelete: PropTypes.func.isRequired,
	id: PropTypes.number.isRequired,
	text: PropTypes.string.isRequired,
	completed: PropTypes.bool.isRequired,
}

export default Todo